<!-- 作品展示 -->
<div id="product" class="blog visible-lg-block visible-md-block"
     style='padding: 0;height: 500px;'>
    <div class="container">
        <div class="w3-about-grids">
            <div class="col-md-12">
                <div id="main" role="main">
                    <div class="wthree-heading" style="margin-top:50px">
                        <span style="font-size: 40px;color: #94c128;display: block">重点项目介绍</span>
                        <span style="font-size: 20px;color: #94c128;display: block">PROJECT INTRODUCTION</span>
                    </div>
                    <div class="indexmaindiv" id="indexmaindiv" style="position:relative;margin-top:50px;">
                        <div class="stylesgoleft" id="goleft"></div>
                        <div class="stylesgoright" id="goright"></div>
                        <div class="swiper-container" id="productSwiper">
                            <div class="swiper-wrapper">
                                @for(item in functions.result){
                                <div class="swiper-slide">
                                    <a class="playerdetail" href="/product/details/${item.id}" target="_blank">
                                        <center>
                                            <div class="detailimg" style="width: 144px; height: 144px;margin-bottom: 20px;"><img src="${item.pic}" class="img-circle" style="width: 144px; height: 144px;object-fit: cover;"/></div>
                                            <div class="teanames" style="clear:both; writing-mode:tb-rl; float:left; margin-left:40px;color: #b3b3b3; width:42px;height:140px;overflow: hidden;">${item.description}</div>
                                            <div style="float:left;width: 1px;height: 120px; background:#2F600F;margin:0 10px;"></div>
                                            <div class="teanames" style="writing-mode:tb-rl;float:left;margin-left:2px;">
                                                <p style="color:#333333;letter-spacing: 0.2em;font-size: large;font-weight: bold;max-height:120px;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;">${item.functionClassName}</p>
                                            </div>
                                        </center>
                                    </a>
                                </div>
                                @}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- //作品展示<a class="mobile-btn-a" href="/functionClass.html">
                <span>查看更多</span>
                <img class="mobile-btn-img" src="${ctxPath}/static/images/icon/row.png"/>
            </a> -->

<div class="blog visible-xs-block visible-sm-block" style="padding-top: 0px;">
    <div class="container">
        <div class="mobile-title2">
            <p>项目介绍</p>
            <p class="intro-text">Project  Introduction</p>
        </div>
        <div class="mobile-model-box">
            <a class="mobile-btn-a" href="/functionClass.html" style="width:100%;height:100%;background: url('${ctxPath}/static/images/pc/functionClass/项目介绍首页.jpg')no-repeat 0 0;background-size: 100% 100%;">
            </a>
        </div>
    </div>
</div>

<script type="text/javascript">
    window.onload = function () {
        var swiper = new Swiper('#productSwiper', {
            pagination: '',
            autoplay:2000,
            slidesPerView: 5,
            spaceBetween: 60,
            freeMode: true,
        });
        $("#goleft").click(function (){
            swiper.slidePrev();
        });
        $("#goright").click(function (){
            swiper.slideNext();
        });
    }
</script>
